/* 宠物护理小程序全局样式 */

/* ==================== 主题色彩方案 ==================== */
:root {
  /* 主色调 - 柔和粉色系 */
  --primary-color: #FFB6C1;
  --primary-light: #FFC0CB;
  --primary-dark: #FF91A4;
  --primary-gradient: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
  /* 标题背景色 */
  --title-bg-color: #FFF8DC;
  --title-text-color: #8B4513;
  
  /* 辅助色 - 小清新色系 */
  --secondary-color: #98E4D6;
  --accent-color: #87CEEB;
  --warning-color: #FFD700;
  --error-color: #FF6B9D;
  --success-color: #98E4D6;
  
  /* 透明度颜色变量 */
  --white-90: rgba(255, 255, 255, 0.9);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-100: rgba(255, 255, 255, 1);
  
  /* 小清新浅绿色变量 */
  --mint-green-90: rgba(240, 255, 240, 0.9);
  --mint-green-30: rgba(152, 228, 214, 0.3);
  --mint-green-95: rgba(240, 255, 240, 0.95);
  --mint-green-98: rgba(240, 255, 240, 0.98);
  --mint-green-100: rgba(240, 255, 240, 1);
  --soft-green: #F0FFF0;
  --light-mint: rgba(152, 228, 214, 0.15);
  
  /* 特殊颜色 */
  --urgent-red: #FF4444;
  --light-gray: #F0F0F0;
  --medium-gray: #666;
  --orange-accent: #FF8C42;
  
  /* 中性色 */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-placeholder: #CCCCCC;
  
  /* 背景色 - 小清新色调 */
  --bg-primary: #FEFEFE;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F0F8FF;
  --bg-overlay: rgba(255, 182, 193, 0.3);
  
  /* 边框色 - 柔和色调 */
  --border-light: #F0E6FF;
  --border-medium: #E6D7FF;
  --border-dark: #D1C4E9;
  
  /* 阴影 */
  --shadow-light: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  --shadow-heavy: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  
  /* 圆角 - 可爱风格 */
  --radius-small: 12rpx;
  --radius-medium: 18rpx;
  --radius-large: 24rpx;
  --radius-xl: 30rpx;
  --radius-round: 50%;
  
  /* 间距 */
  --spacing-xs: 10rpx;
  --spacing-sm: 15rpx;
  --spacing-md: 20rpx;
  --spacing-lg: 30rpx;
  --spacing-xl: 40rpx;
  --spacing-2xl: 50rpx;
  
  /* 字体大小 */
  --font-xs: 20rpx;
  --font-sm: 22rpx;
  --font-md: 24rpx;
  --font-lg: 26rpx;
  --font-xl: 28rpx;
  --font-2xl: 32rpx;
  --font-3xl: 36rpx;
}

/* ==================== 全局重置 ==================== */
/* 避免使用*选择器，改用具体组件选择器 */
view, text, image, scroll-view, button, input, textarea, navigator, swiper, picker {
  box-sizing: border-box;
}

page {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-md);
  line-height: 1.5;
}

/* ==================== 通用布局类 ==================== */
.container {
  padding-bottom: var(--spacing-md);
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ==================== 间距类 ==================== */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

/* ==================== 字体类 ==================== */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }

.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-placeholder { color: var(--text-placeholder); }
.text-theme { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }

/* ==================== 背景类 ==================== */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-theme { background-color: var(--primary-color); }
.bg-theme-light { background-color: var(--primary-light); }
.bg-theme-gradient { background: var(--primary-gradient); }
.bg-success { background-color: var(--success-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-error { background-color: var(--error-color); }

/* ==================== 圆角类 ==================== */
.radius-sm { border-radius: var(--radius-small); }
.radius-md { border-radius: var(--radius-medium); }
.radius-lg { border-radius: var(--radius-large); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-round { border-radius: var(--radius-round); }

/* ==================== 阴影类 ==================== */
.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-heavy { box-shadow: var(--shadow-heavy); }

/* ==================== 通用卡片样式 ==================== */
.card {
  background: var(--bg-primary);
  border-radius: var(--radius-large);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-medium);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.card-title {
  font-size: var(--font-xl);
  font-weight: bold;
  color: var(--text-primary);
}

.card-subtitle {
  font-size: var(--font-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* ==================== 按钮样式 ==================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-medium);
  font-size: var(--font-md);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:active {
  background: var(--primary-dark);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-outline {
  background: transparent;
  border: 2rpx solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:active {
  background: var(--primary-color);
  color: white;
}

.btn-success {
  background: var(--success-color);
  color: white;
}

.btn-warning {
  background: var(--warning-color);
  color: white;
}

.btn-error {
  background: var(--error-color);
  color: white;
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-sm);
}

.btn-large {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-lg);
  height: 80rpx;
}

.btn-block {
  width: 100%;
}

.btn-round {
  border-radius: 50rpx;
}

/* ==================== 输入框样式 ==================== */
.input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2rpx solid var(--border-light);
  border-radius: var(--radius-medium);
  font-size: var(--font-md);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.input:focus {
  border-color: var(--primary-color);
}

.input-group {
  margin-bottom: var(--spacing-md);
}

.input-label {
  display: block;
  font-size: var(--font-md);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-weight: bold;
}

.input-error {
  border-color: var(--error-color);
}

.input-error-text {
  color: var(--error-color);
  font-size: var(--font-sm);
  margin-top: var(--spacing-xs);
}

/* ==================== 标签样式 ==================== */
.tag {
  display: inline-block;
  padding: 6rpx 12rpx;
  border-radius: var(--radius-medium);
  font-size: var(--font-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.tag-primary {
  background: var(--primary-light);
  color: var(--primary-color);
}

.tag-success {
  background: #E8F5E8;
  color: var(--success-color);
}

.tag-warning {
  background: #FFF3E0;
  color: var(--warning-color);
}

.tag-error {
  background: #FFEBEE;
  color: var(--error-color);
}

.tag-urgent {
  background: var(--error-color);
  color: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ==================== 头像样式 ==================== */
.avatar {
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
}

.avatar-sm {
  width: 60rpx;
  height: 60rpx;
}

.avatar-md {
  width: 80rpx;
  height: 80rpx;
}

.avatar-lg {
  width: 120rpx;
  height: 120rpx;
}

.avatar-xl {
  width: 160rpx;
  height: 160rpx;
}

/* ==================== 分割线 ==================== */
.divider {
  height: 2rpx;
  background: var(--border-light);
  margin: var(--spacing-md) 0;
}

.divider-vertical {
  width: 2rpx;
  background: var(--border-light);
  margin: 0 var(--spacing-md);
}

/* ==================== 加载状态 ==================== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-tertiary);
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid var(--border-light);
  border-top: 4rpx solid var(--primary-color);
  border-radius: var(--radius-round);
  animation: spin 1s linear infinite;
  margin-right: var(--spacing-sm);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================== 空状态 ==================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-tertiary);
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-text {
  font-size: var(--font-md);
  margin-bottom: var(--spacing-sm);
}

.empty-desc {
  font-size: var(--font-sm);
  text-align: center;
  line-height: 1.6;
}

/* ==================== 宠物主题特色样式 ==================== */
.pet-icon {
  font-size: var(--font-2xl);
  margin-right: var(--spacing-sm);
}

.paw-print {
  position: relative;
}

.paw-print::before {
  content: '🐾';
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  font-size: var(--font-sm);
  opacity: 0.3;
}

.heart-beat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* ==================== 响应式辅助类 ==================== */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* ==================== 过渡动画 ==================== */
.transition {
  transition: all 0.3s ease;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.3s ease-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes pulse {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10rpx); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ==================== 动画类 ==================== */
.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.slide-in-up {
  animation: slideInUp 0.5s ease-out forwards;
}

.slide-in-down {
  animation: slideInDown 0.5s ease-out forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s ease-out forwards;
}

.bounce-in {
  animation: bounceIn 0.75s ease-out forwards;
}

.pulse {
  animation: pulse 2s infinite;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

.twinkle {
  animation: twinkle 2s ease-in-out infinite;
}

/* ==================== 延迟动画 ==================== */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-500 {
  animation-delay: 0.5s;
}

/* ==================== 安全区域适配 ==================== */
.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}